// /pages/search/search.js

// 导入全局 App 实例
const app = getApp();

Page({
  /**
   * 页面的初始数据
   */
  data: {
    searchText: '',       // WXML input 输入框绑定的值
    searchResult: [],     // 存储前端筛选出的搜索结果
    searchHistory: [],    // 从本地缓存读取的搜索历史记录
    allEquipment: [],     // 存储从后端一次性加载的所有设备数据
    isLoading: true,      // 控制页面初始加载状态
  },

  // ==========================================================
  // =                      生命周期函数                       =
  // ==========================================================

  /**
   * 生命周期函数 -- 监听页面加载
   */
  onLoad() {
    // 启动页面初始化流程
    this.initializePage();
  },

  /**
   * 生命周期函数 -- 监听页面显示
   * 每次进入页面都重新加载历史记录，确保数据同步
   */
  onShow() {
    this.loadSearchHistory();
  },

  // ==========================================================
  // =                      网络与初始化                       =
  // ==========================================================

  /**
   * [核心流程] - 页面初始化
   */
  async initializePage() {
    this.setData({ isLoading: true });
    // 同步加载本地的搜索历史
    this.loadSearchHistory();
    // 异步从网络加载所有设备数据
    await this.fetchAllEquipment();
    this.setData({ isLoading: false });
  },

  /**
   * [网络流程] - 从后端API加载所有设备数据，并进行适配
   */
  async fetchAllEquipment() {
    wx.showLoading({ title: '数据加载中...' });
    try {
      // 1. 使用全局 request 函数获取所有设备列表
      const equipmentList = await app.request({
        url: '/api/app/devices/all'
      });

      // 2. 获取 API 的基地址，用于拼接图片URL
      const baseUrl = app.globalData.config.baseUrl;

      // 3. 数据适配：将后端返回的数据结构，映射为前端UI需要的结构
      const formattedList = equipmentList.map(item => ({
        id: item.id,
        name: item.name,
        model: item.model || '未知型号',
        bookingType: item.remarks || "预约后由设备管理员操作",
        category: item.category.name, // 从嵌套对象中取出分类名称
        canBook: item.is_reservable,
        imageUrl: item.image_url ? baseUrl + item.image_url : null // 拼接完整图片URL
      }));
      
      // 4. 将处理好的数据存入页面 data
      this.setData({ allEquipment: formattedList });

    } catch (err) {
      console.error("加载所有设备失败:", err);
    } finally {
      wx.hideLoading();
    }
  },

  // ==========================================================
  // =                      事件处理函数                      =
  // ==========================================================

  /**
   * [事件处理] - 搜索输入框内容变化时触发
   */
  onInputSearch(e) {
    const keyword = e.detail.value;
    this.setData({ searchText: keyword });

    // 实现实时搜索：当用户输入时，立即执行搜索
    if (keyword.trim()) {
      this.performSearch(keyword.trim());
    } else {
      // 如果输入框被清空，则清空搜索结果
      this.setData({ searchResult: [] });
    }
  },

  /**
   * [事件处理] - 用户点击键盘上的“搜索”或“完成”按钮
   */
  onSearchConfirm(e) {
    const keyword = e.detail.value.trim();
    if (!keyword) return; // 如果关键词为空，则不执行操作

    this.performSearch(keyword);
    this.saveSearchHistory(keyword); // 确认搜索后，保存到历史记录
  },

  /**
   * [事件处理] - 用户点击历史记录标签
   */
  onClickHistory(e) {
    const keyword = e.currentTarget.dataset.keyword;
    this.setData({ searchText: keyword }); // 将关键词填入输入框
    this.performSearch(keyword);         // 执行搜索
    this.saveSearchHistory(keyword);     // 更新该关键词在历史记录中的位置
  },

  /**
   * [事件处理] - 用户点击“清空历史”
   */
  onClearHistory() {
    wx.showModal({
      title: '提示',
      content: '确定要清空所有搜索历史吗？',
      success: (res) => {
        if (res.confirm) {
          this.setData({ searchHistory: [] });
          wx.removeStorageSync('searchHistory'); // 从本地缓存中彻底删除
        }
      }
    });
  },

  /**
   * [事件处理] - 用户点击顶部的“取消”按钮
   */
  onCancelSearch() {
    wx.navigateBack(); // 返回上一个页面
  },

  /**
   * [事件处理] - 用户点击一条搜索结果
   */
  onSelectEquipment(e) {
    // 从自定义组件事件的 detail 中获取被点击的设备项的完整数据
    const selectedItem = e.currentTarget.dataset.item;
    console.log("准备预约的设备:selectedItem ==> ", selectedItem);
    // 前端校验：如果设备不可预约，则提示用户并中断操作
    if (!selectedItem.canBook) {
      wx.showToast({ title: '该设备暂不可预约', icon: 'none' });
      return;
    }
    // 跳转到设备详情页，并通过URL传递设备ID
    wx.navigateTo({
      url: `/pages/device-detail/device-detail?id=${selectedItem.id}`
    });
  },

  // ==========================================================
  // =                     业务与辅助函数                      =
  // ==========================================================

  /**
   * [业务逻辑] - 在前端执行筛选搜索
   * @param {string} keyword - 用户输入的搜索关键词
   */
  performSearch(keyword) {
    const lowerCaseKeyword = keyword.toLowerCase(); // 转换为小写，实现不区分大小写的搜索
    
    // 使用 Array.prototype.filter 方法，从所有设备中筛选出符合条件的项
    const results = this.data.allEquipment.filter(item => 
      item.name.toLowerCase().includes(lowerCaseKeyword) || 
      item.model.toLowerCase().includes(lowerCaseKeyword) || 
      item.category.toLowerCase().includes(lowerCaseKeyword)
    );
    
    // 更新搜索结果，触发UI刷新
    this.setData({ searchResult: results });
  },

  /**
   * [本地缓存] - 从 Storage 加载搜索历史
   */
  loadSearchHistory() {
    const history = wx.getStorageSync('searchHistory') || [];
    this.setData({ searchHistory: history });
  },

  /**
   * [本地缓存] - 保存或更新一条搜索关键词到 Storage
   */
  saveSearchHistory(keyword) {
    // 1. 过滤掉历史记录中已存在的相同关键词
    let history = this.data.searchHistory.filter(item => item !== keyword);
    // 2. 将新的关键词添加到数组的最前面
    history.unshift(keyword);
    // 3. 限制历史记录最多只保存15条
    if (history.length > 15) {
      history = history.slice(0, 15);
    }
    // 4. 更新页面数据和本地缓存
    this.setData({ searchHistory: history });
    wx.setStorageSync('searchHistory', history);
  },
});